@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
  --foreground-rgb: 255, 255, 255;
  --background-primary: #0a0b11;
  --background-secondary: #12141c;
  --background-pattern: #181b26;
  --accent-color: #1d4ed8;
}

body {
  color: rgb(var(--foreground-rgb));
  background-color: var(--background-primary);

  background-image:
    radial-gradient(circle at 25% 25%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.15) 0%, transparent 50%);

  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(10, 11, 17, 0.8) 0%,
      rgba(18, 20, 28, 0.2) 50%,
      rgba(10, 11, 17, 0.8) 100%);
  pointer-events: none;
  z-index: 1;
}

body>div {
  position: relative;
  z-index: 2;
}

.bg-component {
  background-color: rgb(23, 35, 52) !important;
}

.bg-alert {
  background-color: rgba(23, 35, 52, 0.50) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hover\:glow-sm:hover {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
}

.modal-glow {
  box-shadow: 0 0 20px rgba(100, 116, 248, 0.4), 0 0 40px rgba(59, 130, 246, 0.2);
  transition: box-shadow 0.3s ease;
}

.modal-glow-dragging {
  box-shadow: 0 0 30px rgba(129, 140, 248, 0.7), 0 0 60px rgba(59, 130, 246, 0.4);
}
